import "@/assets/style/components/INavbar.scss"
import { defineComponent } from "vue"
export default defineComponent({
  props: {
    title: String,
    rightText: String,
    isBack: { type: Boolean, default: false },
    name: String
  },
  setup(props) {
    const routeBack = () => {
      console.log("clicked!!!")
    }

    const onRightClick = () => {
      console.log("clicked!!! twice")
    }
    const leftBackButton = () => {
      if (props.isBack) {
        return (
          <div class="navbar__title-back" onClick={routeBack}>
            {/* <van-icon name="arrow-left"></van-icon> */}
          </div>
        )
      }
    }
    return () => (
      <>
        <div class="navbar">
          <div class="navbar__title">
            {leftBackButton()}
            {props.title}
          </div>
          <div class="navbar__rightText" onClick={onRightClick}>
            {/* <span v-if="rightText">{props.rightText}</span> */}
            <slot name="right"></slot>
            {/* <van-icon v-if="isLink" name="arrow"></van-icon> */}
          </div>
        </div>
      </>
    )
  }
})
